<template>
	<el-container>
        <el-aside width="200px">
			<el-container>
				<el-header>
					<el-input placeholder="输入关键字进行过滤" v-model="groupFilterText" clearable></el-input>
				</el-header>
				<el-main class="nopadding">
					<el-tree ref="group" class="menu" node-key="id" :data="group" :current-node-key="''" :highlight-current="true" :expand-on-click-node="false" :filter-node-method="groupFilterNode" @node-click="groupClick"></el-tree>
				</el-main>
			</el-container>
		</el-aside>
		<el-container>
            <el-header>
                <div class="right-panel-search">
                    <div class="search-input">设备名称</div>
                    <el-input v-model="search.title_keywords" placeholder="请输入设备名称" clearable @change="upsearch"></el-input>
                    <div class="search-input">设备位置</div>
                    <el-select v-model="search.position_id"  filterable  placeholder="请选择设备位置" clearable @change="upsearch">
                        <el-option v-for="item in group[1].children" :key="item.id" :label="item.title" :value="item.id"/>
                    </el-select>
                    <div class="search-input">设备类别</div>
                    <el-select v-model="search.class_id"  filterable  placeholder="请选择设备类别" clearable>
                        <el-option v-for="item in group[2].children" :key="item.id" :label="item.title" :value="item.id"/>
                    </el-select>
                    <div class="search-input">模糊查询</div>
                    <el-input v-model="search.keywords" placeholder="请输入关键词" clearable @change="upsearch"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
                </div>
            </el-header>
            <el-header>
                <div>
                    <el-button type="primary" icon="el-icon-plus" @click="add" v-auth="'device.add'">新增设备</el-button>
                    <el-button type="primary" icon="el-icon-Printer" :disabled="selection.length==0" @click="print" v-auth="'device.print'">打印设备编码</el-button>
                    <el-button type="primary" :disabled="selection.length==0" @click="addFather" v-auth="'device.asFather'">关联父设备</el-button>
                    <el-button type="primary" :disabled="selection.length==0" @click="outExp" v-auth="'device.export'">导出</el-button>
                </div>
            </el-header>
			<el-main class="nopadding">
                <scTable ref="table" tableName="deviceListColumn" :apiObj="apiObj" :column="column" row-key="id" @selection-change="selectionChange" stripe remoteSort remoteFilter border >
				<el-table-column fixed type="selection" width="50"></el-table-column>
                <el-table-column fixed type="index" label="序号" align="center" width="50"></el-table-column>
                <!-- 备注 -->
                <template #remark="{row}">
                    <el-popover placement="top-start" :width="200" trigger="hover" :content="row.remark">
                        <template #reference>
                            <el-button style="padding: 5px 0;" text class="m-2" v-if="row.remark">{{row.remark.substring(0, 8)}}</el-button>
                        </template>
                    </el-popover>
                </template>
                <!-- 二维码 -->
                <template #img="{row}">
                    <img @click="openImage(row)" class="img" src="../../../assets/img/qrcpoy.png" />
                </template>
                <el-table-column label="操作" fixed="right" align="center" width="220">
                    <template #default="scope">
                        <el-button-group>
                            <el-button text type="primary" size="small" @click="goDetail(scope.row, scope.$index)" v-auth="'device.show'">履历</el-button>
                            <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)" v-auth="'device.view'">查看</el-button>
                            <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)" v-auth="'device.edit'">编辑</el-button>
                            <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
                                <template #reference>
                                    <el-button text type="danger" size="small" v-auth="'device.delete'">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </el-button-group>
                    </template>
                </el-table-column>
			</scTable>
			</el-main>
		</el-container>
	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></save-dialog>
    <img-font v-if="dialog.img" ref="imgDialog" @closed="dialog.img = false" draggable></img-font>
    <dev-print ref="pitDialog"></dev-print>
    <association v-if="dialog.ass" ref="assDialog" @success="handleSuccess" @closed="dialog.ass = false" draggable :query="{no_ids:ids}"></association>
	</el-container>
</template>

<script>
import Association from './association.vue';
import DevPrint from './devPrint.vue';
import ImgFont from './img.vue';
import saveDialog from './save'
export default {
	name: 'user',
	components: {
		saveDialog,ImgFont,DevPrint,Association
	},
	data() {
		return {
			dialog: {
				save: false,
                img:false,
                pit:false,
                ass:false,
			},
			groupFilterText: '',
            group: [
                { label: "所有"},
                { label: "设备位置",type:"位置",children: []},
                { label: "设备类别",type:"类别",children: []},
                { label: "组织列表",type:"组织",children: []},
            ],
			apiObj: this.$API.device.deviceList.getList,
			selection: [],
			search: {
				keywords: null,
                position_id:null,
                class_id:null,
                title_keywords:null
			},
            locationList:[],
            // group:[]
            ids:"",
            column:[
                {label: "设备编码",prop: "code",width: "100",fixed:true},
                {label: "设备名称",prop: "title",width: "150",fixed:true},
                {label: "设备规格",prop: "spec",width: "100",fixed:true},
                {label: "设备类别",prop: "class_title",width: "100",fixed:true},
                {label: "设备位置",prop: "position_title",width: "100"},
                {label: "设备状态",prop: "state_title",width: "100"},
                {label: "资产类别",prop: "asset_class_title",width: "100"},
                {label: "使用部门",prop: "dep_title",width: "100"},
                {label: "报修单位",prop: "maintenance_company",width: "100"},
                {label: "供应商",prop: "apply_title",width: "100"},
                {label: "父设备",prop: "p_title",width: "100"},
                {label: "排序",prop: "sort",width: "100"},
                {label: "备注",prop: "remark",width: "100"},
                {label: "设备二维码",prop: "img",width: "100"},
            ],
		}
	},
	watch: {
		groupFilterText(val) {
			this.$refs.group.filter(val);
		}
	},
	mounted() {
        this.getGroup()
	},
	methods: {
		//添加
		add() {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('add')
			})
		},
        // 履历
        goDetail(row){
            this.$router.push({
                path: '/device/list/detail',
                query:{
                    id:row.id
                }
		    })
        },
        // 打印
        async print(){
            let ids = []
            this.selection.map(item=>{
                ids.push(item.id)
            })
            var reqData = { ids:ids };
            var res = await this.$API.print.devPrint.get(reqData);
            // var ress = await this.$API.print.printTemplate.get(reqData);
			 if (res.code == 1) {
			 	this.$refs.pitDialog.init(res.data);
			 } else {
			 	this.$alert(res.message, "提示", { type: "error" });
			 }
        },
        // 父设备关联
        addFather() {
            var ids = [];
			this.selection.forEach((item) => {
				ids.push(item.id)
			})
			this.dialog.ass = true
			this.$nextTick(() => {
				// this.$refs.assDialog.open('add').setData(ids.toString())
				this.$refs.assDialog.open('add').setData(ids.toString())
			})
		},
        //编辑
		table_show(row) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('show').setData(row)
			})
		},
		//编辑
		table_edit(row) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('edit').setData(row)
			})
		},
        // 图片打开展示
        openImage(row) {
			this.dialog.img = true
			this.$nextTick(() => {
				this.$refs.imgDialog.open('open').setData(row)
			})
		},
		//删除
		async table_del(row, index) {
			var reqData = { id: row.id }
			var res = await this.$API.device.deviceList.delete.post(reqData);
			if (res.code == 1) {
				//这里选择刷新整个表格 OR 插入/编辑现有表格数据
				this.$refs.table.tableData.splice(index, 1);
                this.$refs.table.refresh()
				this.$message.success("删除成功")
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode == 'add') {
				this.$refs.table.refresh()
			} else if (mode == 'edit') {
				this.$refs.table.refresh()
			} else if (mode == 'set') {
				this.$refs.table.refresh()
			}
		},
        selectionChange(selection) {
			this.selection = selection;
            let ids = []
            this.selection.forEach((item) => {
				ids.push(item.id)
			})
            this.ids = (ids).toString()
		},
        // 树
        async getGroup() {
			var res = await this.$API.all.getPosition.get({is_page:0});
			var type = await this.$API.all.getDeviceClass.get({is_page:0});
			var dept= await this.$API.all.getOrgDep.get({is_page:0});
            this.locationList = res.data;
			this.group[1].children = res.data;
			this.group[1].children.map((item) => {
				if(item.title) {
					item.label = item.title + "(" +item.device_count +")"
                    item.type = "位置"
				}
			})
            this.group[2].children = type.data;
			this.group[2].children.map((item) => {
				if(item.title) {
					item.label = item.title + "(" +item.device_count +")"
                    item.type = "类别"
				}
			})
            this.group[3].children = dept.data;
			this.group[3].children.map((item) => {
				if(item.title) {
					item.label = item.title + "(" +item.device_count +")"
                    item.children = item.child
                    item.children.map(item1=>{
                        item1.label = item1.name + "(" +item1.device_count +")"
                        item1.type = "部门"
                    })
                    item.type = "组织"
				}
			})
		},
        groupClick(data){
            if(data.type=="位置"){
                this.$refs.table.reload({position_id: data.id})
            }else if(data.type=="类别"){
                this.$refs.table.reload({class_id: data.id})
            }else if(data.type=="组织"){
                this.$refs.table.reload({org_id: data.id})
            }else if(data.type=="部门"){
                this.$refs.table.reload({dep_id: data.id})
            }else{
                this.$refs.table.reload()
            }
        },
        //树过滤
        groupFilterNode(value, data){
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
	}
}
</script>

<style scoped>
.search-input {
	width: auto;
	font-size: 14px;
}
.shopInfo{
    display: flex;
    align-items: center;
}
.img{
    width: 25px;
    height: 25px;
    margin-right: 5px;
    cursor: pointer;
}
</style>
